<!--添加银行卡-->
<template>
  <div class="add_widthdraw">
    <mt-header fixed title="添加银行卡">
      <router-link to="" slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div>
      <span>姓名</span>
      <input type="text" placeholder="请输入开户人姓名" v-model="name" />
    </div>
    <div>
      <span>银行卡</span>
      <input
        type="text"
        pattern="[0-9]*"
        οninput="if(value.length>7) value=value.slice(0,7)"
        placeholder="请输入银行卡号"
        v-model="card"
        maxlength="19"
      />
    </div>
    <div>
      <span>开户行</span>
      <input type="text" placeholder="请输入开户行" v-model="openingbank" />
    </div>
    <div class="submit">
      <button class="tijiao" @click="tijiao">提交</button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Insert } from "../../api/api";
import querystring from "query-string";
import { Toast, Header } from "mint-ui";

export default {
  name: "addwithdraw",
  data() {
    return {
      name: "",
      card: "",
      openingbank: "",
      iosShow: false
    };
  },
  created() {
    this.Phonetype();
  },
  methods: {
    tijiao() {
      if (this.name == "") {
        Toast("请填写姓名");
        return false;
      } else if (this.card == "") {
        Toast("请填写银行卡");
        return false;
      } else if (this.openingbank == "") {
        Toast("请输入开户行");
        return false;
      } else {
        var params = {
          bankName: this.name,
          bankCode: this.card,
          openBank: this.openingbank
        };
        var params = querystring.stringify(params);
        var a = localStorage.getItem("token");
        a = JSON.parse(a);
        Insert(params, a).then(res => {
          if (res.data.code == 1) {
            Toast("添加成功");
            this.$router.go(-1);
          } else {
            Toast(res.data.message);
          }
        });
      }
    },
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.mint-header {
  background: #ffffff;
  color: #333333;
}
.add_widthdraw {
  width: 100%;
  height: auto;
  padding-top: 40px;
}
.add_widthdraw div {
  width: 100%;
  height: 1.14rem;
  border-bottom: 0.02rem solid #dddddd;
  display: flex;
  align-items: center;
  font-size: 0.3rem;
}
.add_widthdraw div:last-child {
  border: none;
}
.add_widthdraw div span {
  display: block;
  width: 1.81rem;
  height: 1.14rem;
  text-align: center;
  line-height: 1.14rem;
  color: #333333;
}
.add_widthdraw div input {
  width: 5rem;
  border: none;
  font-size: 0.3rem;
}
.submit {
  width: 100%;
  height: auto;
  margin-top: 1.3rem;
}
.submit .tijiao {
  width: 6.62rem;
  height: 0.9rem;
  background: #ffb400;
  border-radius: 0.08rem;
  font-size: 0.34rem;
  color: #ffffff;
  border: none;
  outline: none;
  margin: 0 auto;
}
</style>